<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>转账</title>

</head>
<body v-app="app">
<!--
    从json获取数据
-->
{{"hello"}}
        <div  v-controller="jsonCon"  >

                <div v-controller="userCon">
                    username:<br>
                    <input type="text" class="name" v-model="per.Name">
                    {{per.Name}}
                    <!--
                    <input type="text" class="name" v-model="per.Cards[0].CarNum">
                    <input type="text" class="name" v-model="per.Cards[0].Money">
                    <input type="text" class="name" v-model="per.Cards[1].CarNum">
                    <input type="text" class="name" v-model="per.Cards[1].Money">
                    -->
                </div>

                <div  v-controller="cardsCon">
                    cards:<br>
                    <!--<select v-model="card" v-options="x for (x, y) in cards"></select>-->
                    <select v-model="card" v-options="c.CarNum for c in per.Cards"></select>
                    {{card.CarNum}}
                    <br>
                    money: <br>
                    <input type="text"  v-model="card.Money">
                    {{card.Money}}
                </div>
            <hr>
                <div>
                    targetCard: <br>
                    <input type="text">
                </div>

                <div>
                    <input type="submit" value="submit">
                </div>


            </div>

</body>

<script  type="text/javascript" src="../vx/jquery-3.2.1.js"></script>
<script  type="text/javascript" src="../vx/vx.js"></script>

<script>
    var app = vx.module('app', []);
// 创建一个单例的服务
// 类似于构造函数

    app.service('myPer', function() {
        this.getPer = function (p) {
            return p;
        }
    });
//将service 注入到需要的controller

//避免数据不一致
    /*
    app.controller('myCtrl', function($scope, hexafy) {
        $scope.hex = hexafy.myFunc(255);
    });
    */
    app.controller("jsonCon" ,function ($scope, $http) {
        $http({
            method:'get',
            url:'myjson.json',
        }).success(function success(result) {
            $scope.per= result.Person[0];
//            console.log(result.Person[0]);
//            console.log(result.Person[0].Cards[0].CarNum);
            console.log(result.Person[0].Cards);

        })
//        $rootscope.$broadcast() 广播事件

    });
//

    app.controller('userCon', function($scope) {
//        $scope.name = "asd";
    });

    app.controller('cardsCon', function($scope) {
/*
        $scope.cards = {
            card01 : {num :"one"},
            card02 : {num :"two"},
        }
*/
    });
    app.controller('moneyCon', function($scope) {
        $scope.money = "111";
    });

</script>
</html>
